<template>
  <div class="container1" :class="{ print: type == '打印' }">
    <DocHeader
      fromDoc="endoscopeOperate"
      :title="title"
      :bottomBorder="false"
      diagnosis
    >
    </DocHeader>
    <div class="box">
      <div class="item">
        <div class="label">操作名称</div>
        <div class="content">
          <div class="row">
            <el-radio-group v-model="pageData.operateName">
              <el-radio label="胃镜诊疗"></el-radio>
              <el-radio label="大肠镜诊疗"></el-radio>
              <el-radio label="小肠镜诊疗"></el-radio>
              <el-radio label="十二指肠镜诊疗"></el-radio>
              <el-radio label="支气镜诊疗"></el-radio>
              <el-radio label="其他"></el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="label">诊疗操作场所</div>
        <div class="content">
          <div class="row">
            <el-radio-group v-model="pageData.operatePlace">
              <el-radio label="内镜中心"></el-radio>
              <el-radio label="介入室"></el-radio>
              <el-radio label="病区"></el-radio>
              <el-radio label="急诊室"></el-radio>
              <el-radio label="其他"></el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="item" style="justify-content: center">
        <div class="content">
          <div class="row">诊疗操作前评估</div>
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="row">
            跌倒/坠床危险因子评估：高风险患者
            <el-radio-group v-model="pageData.fallRiskEstimate.highRisk">
              <el-radio label="否"></el-radio>
              <el-radio label="是"></el-radio>
            </el-radio-group>
            <span class="space"></span>
            已落实防范措施
            <el-input
              v-model="pageData.fallRiskEstimate.measure"
              style="width: 300px"
            ></el-input>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="row">
            诊疗前疼痛评分：
            <el-radio-group v-model="pageData.painScore">
              <el-radio label="0-3">0-3 分</el-radio>
              <el-radio label="4-6">4-6 分</el-radio>
              <el-radio label="≥7">≥7 分</el-radio>
              <el-radio label="notTake">未采取措施</el-radio>
              <el-radio label="take">已采取措施</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="row">
            生命体征（≥65 岁、有高血压病史、内镜治疗/手术、无痛内镜检查患者）：
          </div>
          <div class="row" style="margin-top: 4px">
            血压
            <el-input
              v-model="pageData.vitalSigns.bloodPressure"
              style="width: 40px"
            ></el-input>
            mmHg
            <span class="space"></span>
            脉搏
            <el-input
              v-model="pageData.vitalSigns.pulse"
              style="width: 40px"
            ></el-input>
            次/分
            <span class="space"></span>
            呼吸
            <el-input
              v-model="pageData.vitalSigns.respire"
              style="width: 40px"
            ></el-input>
            次/分
            <span class="space"></span>
            体温
            <el-input
              v-model="pageData.vitalSigns.temperature"
              style="width: 40px"
            ></el-input>
            ℃
            <span class="space"></span>
            <el-checkbox-group v-model="pageData.vitalSigns.notNeed">
              <el-checkbox label="不需要"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="row">
            伴随疾病：
            <el-checkbox-group v-model="pageData.disease">
              <el-checkbox label="无"></el-checkbox>
              <el-checkbox label="高血压"></el-checkbox>
              <el-checkbox label="冠心病"></el-checkbox>
              <el-checkbox label="糖尿病"></el-checkbox>
              <el-checkbox label="COPD"></el-checkbox>
              <el-checkbox label="其他"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="row">
            伴随疾病：禁食：
            <el-radio-group v-model="pageData.disease2.jinshi">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
              <el-radio label="不需要"></el-radio>
            </el-radio-group>
            <span class="space"></span>
            清肠准备：
            <el-radio-group v-model="pageData.disease2.qingchang">
              <el-radio label="是"></el-radio>
              <el-radio label="不需要"></el-radio>
            </el-radio-group>
          </div>
          <div class="row" style="margin-top: 4px">
            过敏史：
            <el-radio-group v-model="pageData.disease2.gms">
              <el-radio label="无"></el-radio>
              <el-radio label="有"
                >有<el-input
                  v-model="pageData.disease2.gmsContent"
                  class="bottomLine"
                  style="width: 150px"
                ></el-input
              ></el-radio>
            </el-radio-group>
            <span class="space"></span>
            抗凝抗血小板药物服用：
            <el-radio-group v-model="pageData.disease2.yaowu">
              <el-radio label="无"></el-radio>
              <el-radio label="有"
                >有<el-input
                  v-model="pageData.disease2.yaowuContent"
                  class="bottomLine"
                  style="width: 150px"
                ></el-input
              ></el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="label">
          护士签名：<el-input
            v-model="pageData.nurse.sign"
            style="width: 200px"
          ></el-input>
        </div>
        <div class="content">
          <div class="row">
            时间：
            <el-input v-model="pageData.nurse.time.year"></el-input>
            年
            <el-input v-model="pageData.nurse.time.month"></el-input>
            月
            <el-input v-model="pageData.nurse.time.day"></el-input>
            日
            <el-input v-model="pageData.nurse.time.hour"></el-input>
            时
            <el-input v-model="pageData.nurse.time.minute"></el-input>
            分
          </div>
        </div>
      </div>
      <div class="item">
        <div class="label">
          医生签名：<el-input
            v-model="pageData.doctor.sign"
            style="width: 200px"
          ></el-input>
        </div>
        <div class="content">
          <div class="row">
            时间：
            <el-input v-model="pageData.doctor.time.year"></el-input>
            年
            <el-input v-model="pageData.doctor.time.month"></el-input>
            月
            <el-input v-model="pageData.doctor.time.day"></el-input>
            日
            <el-input v-model="pageData.doctor.time.hour"></el-input>
            时
            <el-input v-model="pageData.doctor.time.minute"></el-input>
            分
          </div>
        </div>
      </div>
      <div class="item" style="justify-content: center">
        <div class="content">
          <div class="row">有创诊疗操作开始前共同核查（Time Out）</div>
        </div>
      </div>
      <div class="item">
        <div class="label">
          <div>
            <div>
              <el-checkbox-group v-model="pageData.timeOutCheck.item1">
                <el-checkbox label="患者身份正确"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div>
              <el-checkbox-group v-model="pageData.timeOutCheck.item2">
                <el-checkbox label="操作方式/部位正确"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div>
              <el-checkbox-group v-model="pageData.timeOutCheck.item3">
                <el-checkbox label="麻醉方式正确"></el-checkbox>
                <el-checkbox label="不适用"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div>
              <el-checkbox-group v-model="pageData.timeOutCheck.item4">
                <el-checkbox
                  label="确认相关资料（知情同意书、医用材料单等已填写正确）"
                ></el-checkbox>
              </el-checkbox-group>
            </div>
            <div>
              <el-checkbox-group v-model="pageData.timeOutCheck.item5">
                <el-checkbox
                  label="确认仪器设备、医用材料、植入物完好备用"
                ></el-checkbox>
              </el-checkbox-group>
            </div>
            <div>
              <el-checkbox-group v-model="pageData.timeOutCheck.item6">
                <el-checkbox label="术前药物已经使用"></el-checkbox>
                <el-checkbox label="不适用"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div class="content" style="padding: 0; width: 100%">
          <div class="bottomLine checkItem">
            <div>小组成员核对无误后签名</div>
            <div>
              操作医生：<el-input
                v-model="pageData.timeOutCheck.doctor"
                style="width: 200px"
              ></el-input>
            </div>
          </div>
          <div class="bottomLine checkItem">
            <div>
              护士：<el-input
                v-model="pageData.timeOutCheck.nurse"
                style="width: 200px"
              ></el-input>
            </div>
            <div>
              DSA 技师（如有）：<el-input
                v-model="pageData.timeOutCheck.dsa"
                style="width: 200px"
              ></el-input>
            </div>
          </div>
          <div class="bottomLine checkItem">
            <div>
              麻醉技师（如有）：<el-input
                v-model="pageData.timeOutCheck.mazui"
                style="width: 200px"
              ></el-input>
            </div>
          </div>
          <div class="checkItem">
            <div>Time Out 执行时间：</div>
            <div>
              <el-input v-model="pageData.timeOutCheck.time.year"></el-input>
              年
              <el-input v-model="pageData.timeOutCheck.time.month"></el-input>
              月
              <el-input v-model="pageData.timeOutCheck.time.day"></el-input>
              日
              <el-input v-model="pageData.timeOutCheck.time.hour"></el-input>
              时
              <el-input v-model="pageData.timeOutCheck.time.minute"></el-input>
              分
            </div>
          </div>
        </div>
      </div>
      <div class="item" style="justify-content: center">
        <div class="content">
          <div class="row">有创诊疗操作离室前共同核查（Sign Out）</div>
        </div>
      </div>
      <div class="item">
        <div class="label">
          <div>
            <div>
              <el-checkbox-group v-model="pageData.signOutCheck.item1">
                <el-checkbox label="确认操作器械用物清点正确"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div>
              <el-checkbox-group v-model="pageData.signOutCheck.item2">
                <el-checkbox label="标本无误标贴正确"></el-checkbox>
                <el-checkbox label="无标本"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div>
              <el-checkbox-group v-model="pageData.signOutCheck.item3">
                <el-checkbox
                  label="操作后跌倒/坠床高危患者已落实措施"
                ></el-checkbox>
                <el-checkbox label="不适用"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div>
              <el-checkbox-group v-model="pageData.signOutCheck.item4">
                <el-checkbox label="操作后疼痛已评分、措施已落实"></el-checkbox>
                <el-checkbox label="不适用"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div>
              <el-checkbox-group v-model="pageData.signOutCheck.item5">
                <el-checkbox label="确认皮肤完整"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div>
              <el-checkbox-group v-model="pageData.signOutCheck.item6">
                <el-checkbox label="管路固定通畅"></el-checkbox>
                <el-checkbox label="不适用"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div style="display: flex">
              患者去向：
              <el-radio-group v-model="pageData.signOutCheck.quxiang">
                <el-radio label="离院"></el-radio>
                <el-radio label="病房"></el-radio>
                <el-radio label="ICU"></el-radio>
                <el-radio label="手术室"></el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="content" style="padding: 0; width: 100%">
          <div class="bottomLine checkItem">
            <div>小组成员核对无误后签名</div>
            <div>
              操作医生：<el-input
                v-model="pageData.signOutCheck.doctor"
                style="width: 200px"
              ></el-input>
            </div>
          </div>
          <div class="bottomLine checkItem">
            <div>
              护士：<el-input
                v-model="pageData.signOutCheck.nurse"
                style="width: 200px"
              ></el-input>
            </div>
            <div>
              DSA 技师（如有）：<el-input
                v-model="pageData.signOutCheck.dsa"
                style="width: 200px"
              ></el-input>
            </div>
          </div>
          <div class="bottomLine checkItem">
            <div>
              麻醉技师（如有）：<el-input
                v-model="pageData.signOutCheck.mazui"
                style="width: 200px"
              ></el-input>
            </div>
          </div>
          <div class="checkItem">
            <div>Time Out 执行时间：</div>
            <div>
              <el-input v-model="pageData.signOutCheck.time.year"></el-input>
              年
              <el-input v-model="pageData.signOutCheck.time.month"></el-input>
              月
              <el-input v-model="pageData.signOutCheck.time.day"></el-input>
              日
              <el-input v-model="pageData.signOutCheck.time.hour"></el-input>
              时
              <el-input v-model="pageData.signOutCheck.time.minute"></el-input>
              分
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'
import { baseData } from './baseData.js'

export default defineComponent({
  components: {
    DocHeader,
    DateSelection
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      pageData: cloneDeep(baseData)
    })

    const store = getStoreFromInstance()

    const user = computed(() => store.getters.user)

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = Object.assign(cloneDeep(baseData), jsonText)
      } else {
        nextTick(() => {
          const pageData = cloneDeep(baseData)
          state.pageData = pageData
        })
      }
    }

    function getParams() {
      return state.pageData
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      getParams
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
@import '@/views/doc/styles/doc-fix.scss';
$border: 1px solid #000;

.container1 {
  padding: 20px 0;
  line-height: 23px;
  font-family: SiYuanSong-Medium;
  text-align: start;

  .box {
    border: 1px solid #000;

    .item {
      border-top: 1px solid #000;
      display: flex;

      &:first-child {
        border-top: none;
      }

      .label {
        border-right: 1px solid #000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 360px;
        flex-shrink: 0;
      }

      .content {
        padding: 6px 20px;

        .row {
          display: flex;
          margin-top: 10px;
          white-space: nowrap;

          &:first-child {
            margin-top: 0;
          }

          .space {
            display: inline-block;
            width: 30px;
          }

          .space2 {
            display: inline-block;
            width: 16px;
          }
        }

        .bottomLine {
          border-bottom: 1px solid #000;
        }

        .checkItem {
          padding: 6px 10px;
        }
      }

      .flex {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        & > div {
          display: flex;
          align-items: center;
          line-height: 32px;
        }
      }
    }
  }

  .tip {
    margin-top: 10px;
  }
}

::v-deep {
  .el-radio-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .el-radio {
      display: flex;
      align-items: center;

      .el-radio__label {
        line-height: 2em;
      }
    }
  }

  .el-input {
    width: 50px;
  }

  .el-input .el-input__inner {
    height: 20px;
    text-align: left;
    padding: 0 4px;
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
  }

  input:disabled {
    color: #000;
    background: #fff;
  }
}
</style>
